<template>
    <!-- 按钮样式1 -->
    <div class="btn-component-container">
        <div :class="[cate, type]" @click="callApp()">
            {{ text }}&nbsp;
            <span v-if="counter">({{counter}})</span>
        </div>
    </div>
</template>

<script>
    export default {
        components: {
            Wakeup: function (resolve) {
                require(["../assets/libs/func/callapp.js"], resolve);
            }
        },
        props: {
            text: {
                type: String,
                default: ""
            },
            cate: {
                type: String,
                default: "btn-dark"
            },
            type: {
                type: String,
                default: "btn-full"
            },
            wakeupParam: {
                type: Object,
                default: function () {
                    return {
                        contentType: 6,
                        contentParam: "",
                        infoParams:{}
                    }
                }
            },
            counter: {
                type: Number,
                default: 0
            }
        },
        methods: {
            callApp: function () {
                console.log(JSON.stringify(this.wakeupParam, undefined, 2));
                openDownPage(this.wakeupParam.contentType, this.wakeupParam.contentParam,this.wakeupParam.infoParams);
            }
        }
    }
</script>

<style>
    .btn-component-container {
        text-align: center;
        font-size: 1.0rem;
        margin: 0.4rem auto;
        font-weight: bold;
    }

    /* 由props属性传入的DOM样式 */
    .btn-dark {
        height: 2.5rem;
        color: #FFF;
        line-height: 2.5rem;
        background-color: #9852FF;
        border-radius: 0.5rem;
    }

    .btn-light {
        width: 100%;
        height: 2.5rem;
        border-radius: 1.25rem;
        color: #9852FF;
        line-height: 2.5rem;
        border: 0.06rem solid #9852FF;
    }

    .btn-full {
        width: 100%;
    }

    .btn-half {
        display: inline-block;
        border-radius: 1.25rem;
        padding: 0 1.9rem;
    }
</style>